<!DOCTYPE html>
<html>
<head>
    <#include "../common/meta-headerv2.ftl"/>


</head>
<body>
 <#include "../common/headerv2.ftl"/>

<style>
    .vjs-big-play-button {
        left: 50% !important;
        top: 50% !important;
        margin-left: -2em;
        margin-top: -1.3em;
    }

    #dplayer {
        height:400px;
        width:100%;
    }

    @media screen and(min-width: 800px){

        #dplayer {
            height:400px;
            width:100%;
        }
    } /*>=1024的设备屏幕*/

       /*>=1920的设备屏幕*/

</style>
<#--<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">-->
<#--<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>-->
<#--<link href="//vjs.zencdn.net/7.8.2/video-js.min.css" rel="stylesheet">-->
<#--<script src="//vjs.zencdn.net/7.8.2/video.min.js"></script>-->
<#--<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>-->


<div class="container maincontainer "  >
    <div class="row">

    <#--<video-->
    <#--id="my-player"-->
    <#--class="video-js"-->
    <#--preload="auto"   controls-->
    <#--data-setup='{"example_option":true}'-->
    <#--style='width: 100%;height: 400px'-->
    <#--poster="<#if (recomentMov)?? > ${recomentMov.vodPicBig!""} </#if>">-->
    <#--<source id="source" src="<#if (recomentMov)?? >${recomentMov.vodPlayUrl!""}</#if>" type="application/x-mpegURL"></source>-->
    <#--</video>-->
        <div   class="  col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div id="dplayer" style=""></div>
        </div>
    </div>
</div>
<#--<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/hls.js/0.14.10/hls.min.js"></script>
<#--<script src="/static/jslib/player/DPlayer.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/dplayer@latest"></script>
 <#include "../common/footerv2.ftl"/>
</body>
<script src="/bootstrap-4.5.2-dist/js/bootstrap.min.js"   crossorigin="anonymous"></script>

<script>

</script>
<script>
    var _peerId = '', _peerNum = 0, _totalP2PDownloaded = 0, _totalP2PUploaded = 0;
    $(document).ready(function () {
        const dp = new DPlayer({
            container: document.getElementById('dplayer'),
            autoplay: false,
            theme: '#FADFA3',
            loop: true,
            lang: 'zh-cn',
            screenshot: true,
            hotkey: true,
            preload: 'auto',
            logo: '/static/img/logo.png',
            volume: 0.7,
            mutex: true,
            video: {
                url: '<#if (playItem)?? >${playItem.vodPlayUrl!""}</#if>',
                type: 'customHls',
                customType: {
                    customHls: function (video, player) {
                        const hls = new Hls({
                            debug: false,
                            p2pConfig: {
                                logLevel: true,
                                live: false,        // 如果是直播设为true
                            }
                        });
                        hls.loadSource(video.src);
                        hls.attachMedia(video);
                        hls.p2pEngine.on('stats', function (stats) {
                            _totalP2PDownloaded = stats.totalP2PDownloaded;
                            _totalP2PUploaded = stats.totalP2PUploaded;
                            updateStats();
                        }).on('peerId', function (peerId) {
                            _peerId = peerId;
                        }).on('peers', function (peers) {
                            _peerNum = peers.length;
                            updateStats();
                        })
                    },
                },
            },
        });

    })

    function updateStats() {
        var text = '847正在为您P2P加速' + (_totalP2PDownloaded/1024).toFixed(2)
                + 'MB 连接节点' + _peerNum + '个';
        console.info(text);
    }
</script>
</html>
